export const addNavMenu = (editor) => {
    const { Components } = editor;
    Components.addType('navMenu', {
        model: {
            defaults: {
                name: 'navMenu',
                droppable: false,
                attributes: { class: '' },
                components: [
                    {
                        type: 'div',
                        attributes: { class: 'NavMenu-card-wrapper' },
                        components: [
                            {
                                type: 'div',
                                attributes: { class: 'showNav' },
                                components: [
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav active' },
                                        content: '首页'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '产品中心'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '咨询服务'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '解决方案'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '客户案例'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '咨询中心'
                                    },
                                    {
                                        type: 'text',
                                        attributes: { class: 'nav' },
                                        content: '直播'
                                    },
                                ]
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                            {
                                tagName: 'div',
                                attributes: { class: 'content' },
                            },
                        ],
                    },
                ],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    var navs = thx.getElementsByClassName('nav');
                    var contents = thx.getElementsByClassName('content');
                    contents[0].style.display = 'inherit';
                    for (let i = 0; i < navs.length; i++) {
                        navs[i].onclick = function () {
                            for (let j = 0; j < navs.length; j++) {
                                navs[j].style.color = 'black';
                                navs[j].style.border = 'none';
                                contents[j].style.display = 'none';
                            }
                            if (contents.length > 0) {
                                contents[i].style.display = 'inherit';
                            }
                            navs[i].style.color = '#5b7de2';
                            navs[i].style.borderBottom = '2px solid #5b7de2';
                        }
                    }
                },
                styles: `
                  .NavMenu-card-wrapper{
                  border: 1px solid gray;height:800px;width:80%;margin-left: 10%;margin-right: 10%;
              }
              .content {
                  width:100%;
                  height:95%;
                  display:none;
              }
              .content.active {
                  display: block;
              }
              div button:hover {
                  color: #5b7de2;
              }
              .nav.active{
                  color: #5b7de2;
                  border-bottom: 2px solid #5b7de2;
              }
              .nav {
                  padding-top: 8px;
                  text-align: center;
                  align-items: center;
                  height: 40px;
                  width: 100px;
                  font-weight: 600;
                  background-color: #fff;
                  border: none;
                  cursor: pointer;
              }
                .showNav{
                    display: flex;
                }
              `,
            },
        },
    });
    editor.BlockManager.add("navMenu", {
        label: "导航菜单",
        category: "组件类",
        media:`<svg t="1720769271729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32717" width="30" height="30"><path d="M179.2 281.6c-9.309091 0-18.618182 6.981818-18.618182 18.618182v74.472727H125.672727v34.909091h34.909091v34.909091H186.181818v-74.472727c0-6.981818 2.327273-11.636364 9.309091-13.963637v-55.854545c0-11.636364-6.981818-18.618182-16.290909-18.618182z m481.745455 216.436364c-9.309091 0-18.618182 6.981818-18.618182 18.618181v81.454546h-34.909091v34.909091h34.909091v34.909091h27.927272v-81.454546c0-6.981818 2.327273-11.636364 6.981819-13.963636v-55.854546c2.327273-11.636364-4.654545-18.618182-16.290909-18.618181z m-402.618182-53.527273v46.545454c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618181-18.618182v-46.545454h-37.236363z m-97.745455 34.909091v11.636363c0 9.309091 6.981818 18.618182 18.618182 18.618182 2.327273 0 6.981818 0 9.309091-2.327272v-27.927273H160.581818z m581.818182 188.509091v39.563636c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618182-18.618182v-39.563636h-37.236364z m-97.745455 34.909091v4.654545c0 9.309091 6.981818 18.618182 18.618182 18.618182 4.654545 0 6.981818 0 9.309091-2.327273v-20.945454h-27.927273zM907.636364 116.363636H116.363636C67.490909 116.363636 25.6 146.618182 11.636364 190.836364c-4.654545 11.636364-4.654545 23.272727-4.654546 34.909091v572.50909C4.654545 858.763636 55.854545 907.636364 116.363636 907.636364h130.327273v-34.909091H116.363636c-41.890909 0-74.472727-34.909091-74.472727-74.472728v-165.236363h605.090909v74.472727c0 9.309091 6.981818 18.618182 18.618182 18.618182 4.654545 0 6.981818 0 9.309091-2.327273 4.654545-2.327273 6.981818-9.309091 6.981818-13.963636v-74.472727H744.727273v74.472727c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618181-18.618182v-74.472727h207.127273v165.236363c0 25.6-13.963636 51.2-34.909091 62.836364-9.309091 6.981818-20.945455 11.636364-34.909091 11.636363H293.236364V907.636364H907.636364c11.636364 0 23.272727-2.327273 34.909091-4.654546 44.218182-13.963636 74.472727-55.854545 74.472727-104.727273V225.745455C1017.018182 165.236364 968.145455 116.363636 907.636364 116.363636z m74.472727 481.745455h-207.127273v-81.454546c0-9.309091-6.981818-18.618182-18.618182-18.618181-9.309091 0-18.618182 6.981818-18.618181 18.618181v81.454546H674.909091v-81.454546c0-9.309091-6.981818-18.618182-18.618182-18.618181-9.309091 0-18.618182 6.981818-18.618182 18.618181v81.454546h-605.090909v-188.509091h121.018182v81.454545c0 9.309091 6.981818 18.618182 18.618182 18.618182 2.327273 0 6.981818 0 9.309091-2.327272 4.654545-2.327273 9.309091-9.309091 9.309091-13.963637v-81.454545h60.509091v81.454545c0 9.309091 6.981818 18.618182 18.618181 18.618182 9.309091 0 18.618182-6.981818 18.618182-18.618182v-81.454545h691.2v186.181818z m0-223.418182H293.236364v-74.472727c0-9.309091-6.981818-18.618182-18.618182-18.618182-9.309091 0-18.618182 6.981818-18.618182 18.618182v74.472727H195.490909v-74.472727c0-9.309091-6.981818-18.618182-18.618182-18.618182-9.309091 0-18.618182 6.981818-18.618182 18.618182v74.472727H39.563636V225.745455v-4.654546c2.327273-13.963636 6.981818-25.6 13.963637-34.909091 11.636364-20.945455 34.909091-34.909091 62.836363-34.909091h791.272728c41.890909 0 74.472727 34.909091 74.472727 74.472728v148.945454zM644.654545 702.836364v4.654545c0 9.309091 6.981818 18.618182 18.618182 18.618182 4.654545 0 6.981818 0 9.309091-2.327273v-20.945454h-27.927273z m97.745455-34.909091v39.563636c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618182-18.618182v-39.563636h-37.236364z m-581.818182-188.509091v11.636363c0 9.309091 6.981818 18.618182 18.618182 18.618182 2.327273 0 6.981818 0 9.309091-2.327272v-27.927273H160.581818z m97.745455-34.909091v46.545454c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618181-18.618182v-46.545454h-37.236363z m402.618182 53.527273c-9.309091 0-18.618182 6.981818-18.618182 18.618181v81.454546h-34.909091v34.909091h34.909091v34.909091h27.927272v-81.454546c0-6.981818 2.327273-11.636364 6.981819-13.963636v-55.854546c2.327273-11.636364-4.654545-18.618182-16.290909-18.618181zM179.2 281.6c-9.309091 0-18.618182 6.981818-18.618182 18.618182v74.472727H125.672727v34.909091h34.909091v34.909091H186.181818v-74.472727c0-6.981818 2.327273-11.636364 9.309091-13.963637v-55.854545c0-11.636364-6.981818-18.618182-16.290909-18.618182z m-18.618182 197.818182v11.636363c0 9.309091 6.981818 18.618182 18.618182 18.618182 2.327273 0 6.981818 0 9.309091-2.327272v-27.927273H160.581818z m97.745455-34.909091v46.545454c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618181-18.618182v-46.545454h-37.236363z m386.327272 258.327273v4.654545c0 9.309091 6.981818 18.618182 18.618182 18.618182 4.654545 0 6.981818 0 9.309091-2.327273v-20.945454h-27.927273z m97.745455-34.909091v39.563636c0 9.309091 6.981818 18.618182 18.618182 18.618182 9.309091 0 18.618182-6.981818 18.618182-18.618182v-39.563636h-37.236364z" p-id="32718"></path><path d="M982.109091 633.018182v165.236363c0 25.6-13.963636 51.2-34.909091 62.836364v-230.4h34.909091zM947.2 409.6h34.909091v188.509091h-34.909091zM982.109091 225.745455V372.363636h-34.909091v-76.8c0-60.509091-48.872727-111.709091-111.709091-111.709091H53.527273c11.636364-18.618182 34.909091-32.581818 62.836363-32.581818h791.272728c41.890909 0 74.472727 32.581818 74.472727 74.472728z" p-id="32719"></path></svg>`,
        select: true,
        content: { type: "navMenu" },
      });
};
